<template>
  <div style="padding: 10px">
      <el-upload ref="upload" class="upload-demo" drag action="http://localhost:8000/identify/single/" accept="image/*" :on-success="filesUploadSuccess">
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text" >
          拖拽到这里或者<em>点击上传</em>
        </div>
      </el-upload>
    <br>
      <el-image
          style="width: 630px; height: 500px"
          :src="image_before"
          :preview-teleported="true">       <!-- preview-teleported="true" 解决图片穿模问题 -->
      </el-image>
    <text v-html="'&nbsp;'"></text>         <!--空格-->
      <el-image
            style="width: 630px; height: 500px"
            :src="image_after"
            :preview-teleported="true">
      </el-image>
    <br>
  </div>
</template>

<script>

import { UploadFilled } from '@element-plus/icons-vue';

export default {
  name: "Deal",
  data() {
    return {
      image_before: '',
      image_after: ''
    }
  },
  components: {
    UploadFilled
  },
  methods: {
    filesUploadSuccess(res){
      if (this.$refs['upload']){
        this.$refs['upload'].clearFiles();  //清除历史文件列表
      }
      // alert("上传成功");
      this.image_before = res.data.image_before; //res.data.处理前图片链接
      this.image_after = res.data.image_after;  //res.data.处理后图片链接
      console.log(res.data);
    },
  }
}
</script>

<style scoped>

</style>